<template>
    <div id="city" style="width:50rem;height:50rem"></div>
</template>

<script>
import echarts from "echarts";
//引入方式
// import bMapLuoyangH from './my-compents/bMapluoyangH'
// import bMapH from './my-compents/bMapH'
require("echarts/map/js/province/henan");
// require("echarts/map/js/geo");
// var henan =
export default {
  data() {
    return {
      mapChart: null
    };
  },
  mounted() {
    // this.initMap();
    this.initHeNan();
    // this.jsonMap()
  },
  methods: {
       initHeNan() {
      var option = {
        title: {
          text: "房联行情况",
          subtext: "纯属虚构",
          x: "center",
          textStyle: {
            color: "white"
          }
        },
        tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                            return params.name + ' : ' +'<p>成交量：'+params.value+' 套</p>'+'<p>收入：'+params.value+'万元 </p>';

                    }
                },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["123123"]
        },
        visualMap: {
                show: false,
                min: 0,
                max: 10,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                inRange: {
                    // color: ['#3B5077', '#031525'] // 蓝黑
                    // color: ['#ffc0cb', '#800080'] // 红紫
                    // color: ['#3C3B3F', '#605C3C'] // 黑绿
                    // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                    // color: ['#23074d', '#cc5333'] // 紫红
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    color: ['#1488CC', '#2B32B2'] // 浅蓝
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿
                    // color: ['#00467F', '#A5CC82'] // 蓝绿

                }
            },
        geo: {
          map: "河南",
           // 地图中心经纬度，郑州
          center: [113.65, 34.76],
          // 百度地图缩放
          zoom: 1,
          roam: true,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "rgba(0,0,0,0.4)"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)"
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 20,
            symbol:
              "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
            symbolRotate: 35,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            },
            
          },
          {
            name: "门店",
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "郑州市",
                value: 1,
              },
             {
                name: "洛阳市",
                value: 300,
              },
            ]
          }
        ]
      };
      var self = this;
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("city"));
        self.mapChart.setOption(option);
      }, 10);
    },
    jsonMap(){
        var url =  process.env.BASE_API + '/410300.json'
        this.$fetch({
					url:url,
					method:'get',
        }).then(resData=>{
            echarts.registerMap('洛阳',resData.data);
            this.initLuoYang()
        }).catch(err=>{
                console.log(err)
        });
    },
    initLuoYang() {
          var geoCoordMap = {
                '西工区':[112.4309294976,34.6670038363],
                '涧西区':[112.3591770197,34.6610212021],
                '洛龙区':[112.4638651322,34.6236159104],
                '老城区':[112.4350295831,34.7253048201],
                '瀍河回族区':[112.4963006537,34.7039155259],
            }
            var data = [
                {name: '西工区', value: 5},
                {name: '涧西区', value: 6},
                {name: '洛龙区', value: 8},
                {name: '老城区', value: 10},
                {name: '瀍河回族区', value: 9},
            ];
            var max = 120, min = 2; // todo 
            var maxSize4Pin = 30, minSize4Pin = 2;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
      var option = {
                title: {
                    text: '洛阳门店分布',
                    subtext: '',
                    x: 'center',
                    textStyle: {
                        color: '#ccc'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if(typeof(params.value)[2] == "undefined"){
                            return params.name + ' : ' + params.value;
                        }else{
                            return params.name + ' : ' + params.value[2];
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    y: 'bottom',
                    x: 'right',
                    data: ['洛阳门店分布'],
                    textStyle: {
                        color: '#fff'
                    }
                },
                visualMap: {
                    show: false,
                    min: 0,
                    max: 10,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'], // 文本，默认为数值文本
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        // color: ['#3B5077', '#031525'] // 蓝黑
                        // color: ['#ffc0cb', '#800080'] // 红紫
                        // color: ['#3C3B3F', '#605C3C'] // 黑绿
                        color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
                        // color: ['#23074d', '#cc5333'] // 紫红
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#1488CC', '#2B32B2'] // 浅蓝
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿
                        // color: ['#00467F', '#A5CC82'] // 蓝绿

                    }
                },
                geo: {
                    show: true,
                    center:[112.4608987892,34.6649484794],//地图中心点
                    map: '洛阳',
                    zoom:6,
                    label: {
                        normal: {
                            show: false,
                            color:'white'
                        },
                        emphasis: {
                            show: false,
                             color:'white'
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7',
                        }
                    }
                },
                series : [
                 {
                    name: 'credit_pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#05C3F9'
                        }
                    }
                },
                {
                    type: 'map',
                    map: 'jiangxi',
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: data
                },
                    {   
                        name: '点',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'pin',
                        symbolSize: function (val) {
                            return 9*val[2];
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 9,
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#F62157', //标志颜色
                            }
                        },
                        zlevel: 6,
                        data: convertData(data),
                    },
                    {
                        name: 'Top 5',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(data.sort(function (a, b) {
                            return b.value - a.value;
                        }).slice(0, 5)),
                        symbolSize: function (val) {
                            return val[2] *6;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#05C3F9',
                                shadowBlur: 10,
                                shadowColor: '#05C3F9'
                            }
                        },
                        zlevel: 1
                    },
         
                
            ]
      };
      var self = this;
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("city"));
        self.mapChart.setOption(option);
      }, 10);
    },
    ///引入百度地图
    initMap() {
      var option = {
        // 加载 bmap 组件
        bmap: {
          // 地图中心经纬度，郑州
          center: [113.65, 34.76],
          // 百度地图缩放
          zoom: 19,
          // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
          roam: true,
          // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3"
                }
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd"
                }
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off"
                }
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe"
                }
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1"
                }
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999"
                }
              }
            ]
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "bmap",
            data: [[116.37, 33.94]]
          }
        ]
      };
      this.mapChart = echarts.init(document.getElementById("bmapsss"));
      this.mapChart.setOption(option);
      // 获取百度地图实例，使用百度地图自带的控件
      var bmap = this.mapChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      bmap.addControl(new BMap.MapTypeControl());
      bmap.setMaxZoom(19);
    }
  }
};
</script>
<style>

</style>
